<template>
  <div id="login" v-title data-title="登录 - 动物保护协会">
    <video preload="auto" class="me-video-player" autoplay="autoplay" loop="loop">
          <source src="../../static/vedio/sea.mp4" type="video/mp4">
      </video>

    <div class="me-login-box me-login-box-radius">
      <h1>动物保护协会 登录</h1>

      <el-form ref="userForm" :model="userForm" :rules="rules">
        <el-form-item prop="email">
          <el-input placeholder="邮箱" v-model="userForm.email"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input placeholder="密码" v-model="userForm.password" type="password"></el-input>
        </el-form-item>

        <el-form-item size="small" class="me-login-button">
          <el-button type="primary" @click.native.prevent="login('userForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>

      <div class="me-login-design">
        <p>
          <strong>
            <router-link to="/" class="me-login-design-color">首页</router-link>
          </strong>
          <strong>
            <router-link to="/register" class="me-login-design-color"
              >注册</router-link
            >
          </strong>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      userForm: {
        email: "",
        password: "",
      },
      rules: {
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
            message: "请输入邮箱地址",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { max: 30, message: "不能大于30个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this;
          this.$axios.post("/login", this.userForm).then((res) => {
            if(res.data.data===null){
              this.$message({type: 'error', message: '你的账号已被禁用或账号不存在', showClose: true})
            }else{
              const jwt = res.headers["authorization"];
              const userInfo = res.data.data;
              // 把数据共享出去
              _this.$store.commit("SET_TOKEN", jwt);
              _this.$store.commit("SET_USERINFO", userInfo);
              // 获取
              //console.log(_this.$store.getters.getUser);
              // 跳转页面
              _this.$router.push("/");
            }

          });

        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
#login {
  min-width: 100%;
  min-height: 100%;
}

.me-video-player {
  background-color: transparent;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  position: absolute;
  left: 0;
  z-index: 0;
  top: 0;
}

.me-login-box {
  position: absolute;
  width: 300px;
  height: 260px;
  background-color: white;
  margin-top: 150px;
  margin-left: -180px;
  left: 50%;
  padding: 30px;
}

.me-login-box-radius {
  border-radius: 10px;
  box-shadow: 0px 0px 1px 1px rgba(161, 159, 159, 0.1);
}

.me-login-box h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  vertical-align: middle;
}

.me-login-design {
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
}

.me-login-design-color {
  color: #5fb878 !important;
}

.me-login-button {
  text-align: center;
}

.me-login-button button {
  width: 100%;
}
</style>
